<template>
    <div  class="main">
      <div ref="startWindowRef" class="info">
        <div class="left" :style="{background: leftBgColor}" v-if="text">
            <div class="icon">
                <!--
                待发货.icon-31daifahuo
                已发货.icon-kuaididan
                待收货.icon-daishouhuo
                已收货.icon-yishouhuo
                运输中.icon-yunshuzhong
                -->
                <span v-if="icon" class="iconfont" :class="[icon]"></span>
                <span v-else class="text">{{ text }}</span>

            </div>
        </div>
        <div class="right" :style="{background: rightBgColor}">{{ state }}</div>
    </div>
    <div class="jiantou" :style="{borderTop: `10px ${rightBgColor} solid`}">
        </div>
    </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String
    },
    state: {
      type: String,
      default: '待发货'
    },
    leftBgColor: {
      type: String,
      default: '#e3e3e3'
    },
    rightBgColor: {
      type: String,
      default: '#fff'
    },
    text: {
      type: String,
      default: ''
    }
  },
  mounted () {
  }
}

</script>

<style scoped lang="scss">
.main{
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));
.info{
    position: relative;
    border-radius: 10px;
    margin: 0 auto;
    background: #fff;
    width: fit-content;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    .left{
        flex: 2;
        height: 100%;
        background: #64af5d;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        .icon{
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont{
                font-size: 1.5em;
                color: #3a3a3a;
            }
        }
    }
    .right{
        height: 100%;
        flex: 3;
        line-height: 40px;
        padding: 0 15px;
    }

}
.jiantou{
      position: absolute;
      left: 50%;
      transform: translate(-50%,0);
      width: 0;
      height: 0;
      border-left: 8px transparent solid;
      border-right: 8px transparent solid;
      border-bottom: 8px #f00 solid;
      border-top: 8px #fff solid;
      //  background-color: #f30505; /* 设置背景颜色 */
      clip-path: ellipse(50% 50% at 50% -8%);
 }
}

</style>
